<style lang='scss' type='stylesheet/scss' scoped>
</style>
<template>
  <as-card :text="text"
           title="为 dialog 绑定 visible 可切换显示，visible 接受 Boolean 类型的变量。绑定 title 可以为 dialog 设置标题，绑定 width 可以更改 dialog 的宽度">
    <as-button @click="dialogVisible = true">打开对话框</as-button>
    <as-dialog :visible.sync="dialogVisible" title="对话框标题" width="90%">
      你好！
      <as-button @click="dialogVisible=false" slot="footer" style="float:right" type="primary">确定</as-button>
    </as-dialog>
  </as-card>
</template>

<script type="text/ecmascript-6">
import { mapGetters } from "vuex";
export default {
  name: "",
  computed: {
    ...mapGetters(["isMobile"])
  },
  data() {
    return {
      dialogVisible: false,
      text: `<template>
   <div>
     <as-button @click="dialogVisible = true">打开对话框</as-button>
     <as-dialog :visible.sync="dialogVisible" title="对话框标题"  width="90%">
      你好！
       <as-button @click="dialogVisible=false" slot="footer"  style="float:right" type="primary">确定</as-button>
     </as-dialog>
   </div>
 </template>
 <script>
 export default {
   data() {
     return {
       dialogVisible: false
     }
   }
 }
 <\/script>`
    };
  }
};
</script>
